<template>
  <div class="header">
    <span>{{city}}</span>天气
    <span :class="['iconfont','icon-shuaxin','refresh', flag ? 'paused' : '']" @click="handleRefresh"></span>
  </div>
</template>
<script>
export default {
  props: {
    city:{
      type: String,
      default: '深圳'
    },
    cityId: {
      type: String,
      default: '440305'
    }
  },
  name: "Header",
  data() {
    return {
      //控制动画
      flag: false
    };
  },
  methods: {
    //处理刷新事件
    handleRefresh() {
      this.flag = true
      setTimeout(() => {
        this.flag = false
      }, 1000)
      this.$emit('refresh', this.cityId)
    }
  },
};
</script>
<style scoped>
  .header {
    width: auto;
    font-size: 22px;
    color: #fff;
    background-color: #6590f6;
    line-height: 50px;
    padding-left: 20px;
    padding-right: 32px;
  }
  .refresh {
    float: right;
    font-size: 24px;
    animation: animat 1s linear infinite;
    animation-play-state: paused;
  }
  .paused {
    animation-play-state: running;
  }
  @keyframes animat {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
</style>